<!DOCTYPE HTML>
<html>
	<head>
		<title>Home</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<!-- bootstrap -->
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
		<!-- //bootstrap -->
		<!-- Custom Theme files -->
		<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
		<script src="js/jquery-1.8.3.min.js"></script>
		<!--start-smoth-scrolling-->
		<link href="css/component.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event) {
					event.preventDefault();
					$('html,body').animate({
						scrollTop: $(this.hash).offset().top
					}, 1000);
				});
			});
		</script>
		<!-- start-smoth-scrolling -->
		<script src="js/userInfo.js"></script>
		<script type="text/javascript" src="js/move-top.js"></script>
	</head>
	<body class="cbp-spmenu-push">
		<!--header-->
		<div class="header-section">
			<div class="container">
				<!-- 登陆框主体 -->
				<div id="login" class="login">
					<!-- 登陆框标题 -->
					<div id="login-title" class="login-title">
						登陆账号
						<span><a id="closeBtn" v-on:click="closePannel()">关闭</a></span>
					</div>
					<!-- 登陆框表单 -->
					<div id="login-form">
						<div class="login-input">
							<label>登录名：</label>
							<input type="text" placeholder="请输入登录名" class="list-input" v-model="name" />
						</div>

						<div class="login-input">
							<label>密 码：</label>
							<input type="password" placeholder="请输入密码" class="list-input" v-model="pwd" />
						</div>
					</div>
					<!-- 登陆框登陆按钮 -->
					<input type="submit" id="loginSubmit" value="登陆会员" class="loginSubmit"  v-on:click="login()"/>
				</div>

				<div class="header-top">
					<div class="top-nav">
						<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
							<h3>菜单</h3>
							<ul>
								<li><a href="index.html">主页</a></li>
								<script>
									$("li.menu").click(function() {
										$("ul.cl-effect-1").slideToggle(300, function() {
											// Animation complete.
										});
									});
								</script>
								<li><a href="activitys.html">日常活动</a></li>
								<li><a href="#">匹配功能</a></li>
								<li><a href="mail.html">聊天室</a></li>
								<li><a href="mail.html">个人主页</a></li>
							</ul>
						</nav>
						<div class="main buttonset">
							<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
							<button id="showRightPush"><img src="images/menu.png" alt="" /></button>
							<!--<span class="menu"></span>-->
						</div>
						<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
						<script src="js/classie.js"></script>
						<script>
							var menuRight = document.getElementById('cbp-spmenu-s2'),
								showRightPush = document.getElementById('showRightPush'),
								body = document.body;

							showRightPush.onclick = function() {
								classie.toggle(this, 'active');
								classie.toggle(body, 'cbp-spmenu-push-toleft');
								classie.toggle(menuRight, 'cbp-spmenu-open');
								disableOther('showRightPush');
							};

							function disableOther(button) {
								if (button !== 'showRightPush') {
									classie.toggle(showRightPush, 'disabled');
								}
							}
						</script>
					</div>
					<div class="header-logo">
						<a href="index.html"><img src="images/yuanfen.png"  /></a>
					</div>
					<div class="search-form">
						<ul class="loginbtn">
							<li><a type="text" class="btn" v-on:click="login()" v-html="loginIcon"> </a></li> /
							<li><a class="btn" data-toggle="modal" data-target="#registerModal">Register</a></li>
						</ul>
					</div>					
				</div>
			</div>
		</div>
		<!--/header-->
		<div class="header-grids"> 
			<div class="header-grid-titile">
				你可能感兴趣的朋友
			</div>
			<div class="header-grid-info-root">
				<div class="col-md-4 header-grid-info" v-for="item in GoodFirends">
						<div v-bind:class="'header-grid '+item.color" v-bind:id = "item.id">
							<div class="header-grid-img gray-grid" style="text-align: center;">
								<img v-bind:src="item.pic" alt="" >
								<h3>{{item.name}}</h3>
								<p>{{item.say}}</p>
								<input type="submit" v-bind:id="'mkBtn' + item.id" value="加好友" class="mkBtn"  v-on:click="mkFriend(item.id)"/>
								<p v-bind:id="'mkRes' + item.id" style="font-size:15px;display: none;">已添加，开始聊天吧~</p>
							</div>
						</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div> 

		<div class="featured-section">
			<div class="container">
				<h2>最近的活动</h2>
				<div class="featured-main">
					<div class=" col-md-3 feature-text">
						<img src="images/travel.jpg" alt="">
						<div class="feature-text-grids">
							<div class="feature-text-left">
								<img src="images/7.png" alt="" />
							</div>
							<div class="feature-text-right">
								<h3>一起去旅游~</h3>
								<p>我想要带你去浪漫的土耳其，然后一起去东京和巴黎</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class=" col-md-3 feature-text">
						<img src="images/sport.webp" alt="">
						<div class="feature-text-grids">
							<div class="feature-text-left">
								<img src="images/13.png" alt="" />
							</div>
							<div class="feature-text-right">
								<h3>一起做运动~</h3>
								<p>Ôooo
									Os Deuses do Olímpo
									Ôooo
									Chegaram na nossa cidade
									Ôooo</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class=" col-md-3 feature-text">
						<img src="images/eat.webp" alt="">
						<div class="feature-text-grids">
							<div class="feature-text-left">
								<img src="images/18.png" alt="" />
							</div>
							<div class="feature-text-right">
								<h3>一起吃大饭~</h3>
								<p> 思君令人老，岁月忽已晚。弃捐勿复道，努力加餐饭。</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>

					<div class=" col-md-3 feature-text">
						<img src="images/ml.webp" alt="">
						<div class="feature-text-grids">
							<div class="feature-text-left">
								<img src="images/25.png" alt="" />
							</div>
							<div class="feature-text-right">
								<h3>一起玩木头玩偶~</h3>
								<p>啦啦啦啦~</p>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
		</div>

		<div class="copy-right-section">
				<div class="container">
					<div class="col-md-6 copy-right" style="text-align: center;">
						<p>一起来交友~~<a target="_blank" href="adminWeb/login.html">@Admin</a></p>
					</div>
				</div>
		</div>
		
		<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">注册</h4>
					</div>
					<form class="form-horizontal" role="form" method="GET" action="login/register" target="hidden_frame" id="registerForm">
						<div class="modal-body">
							<div class="form-group">
							  <label for="userName" class="col-sm-2 control-label">用户名</label>
							  <div class="col-sm-10">
								<input type="text" class="form-control" id="userName" placeholder="请输入用户名" name="userName" required autofocus>
							  </div>
							</div>
							<div class="form-group">
							  <label for="password" class="col-sm-2 control-label">密码</label>
							  <div class="col-sm-10">
								<input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" required>
							  </div>
							</div>	
						</div>

						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="submit" class="btn btn-primary">提交</button>
						</div>
					</form>
					<iframe name='hidden_frame' id="hidden_frame" style='display: none'></iframe>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		</div>
	</body>
	<script>
		$('#hidden_frame').load(function(){
		    var text=$(this).contents().find("body").text();
		    var j=$.parseJSON(text);
		    if(j.status!=0) {
		        alert(j.msg);
		    } else {
		        alert('注册成功!');
				$('#registerForm').modal('hide');
				$(".modal.fade").hide();
		    }
		});
	</script>
	<script src="js/vue.js"></script>
	<script src="js/axios.min.js"></script>
	<script>
		config0 = {
			"el": "#login",
			"data": {
				"name": "输入登录名..",
				"pwd": ""
			},
			"methods": {
				closePannel() {
					var login = document.getElementById("login") ;
					login.style.display = "none";
					return false;
				},
				
				"login" : function(){
					var a = url + "/login/login?password=" + this.pwd + "&userName=" + this.name ;
					console.log(a) ;
					
					axios.get(a)
					.then(function(response){
						console.log(response) ;
						if(response.data.state == "0") {
							
							window.alert("登录成功！") ;
							window.sessionStorage.setItem("id" ,response.data.data) ;
							
							window.sessionStorage.setItem("name" , this.vue0.name) ;
							this.vue0.closePannel() ;
							window.location.href = "index.html";
						}else{
							window.alert("登录失败！") ;
						}
					})
					.catch() ;
					
				}
			},
			"mounted": function() {
				
				var login_title = document.getElementById('login-title');
				login_title.onmousedown = function(e) {
					e = e || window.event;
					var x = e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement
						.scrollLeft);
					var y = e.pageY || e.clientY + (document.body.scrollTop || document.documentElement
					.scrollTop);

					var boxX = login.offsetLeft;
					var boxY = login.offsetTop;

					var mouse_in_boxX = x - boxX;
					var mouse_in_boxY = y - boxY;

					document.onmousemove = function(e) {
						var x = e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement
							.scrollLeft);
						var y = e.pageY || e.clientY + (document.body.scrollTop || document.documentElement
							.scrollTop);

						login.style.left = x - mouse_in_boxX + 256 + 'px';
						login.style.top = y - mouse_in_boxY - 142 + 'px';
					}
				}

				login_title.onmouseup = function() {
					document.onmousemove = null;
				}
			}
		}

		config = {
			"el": ".header-grid-info-root",
			"data": {
				"color": [
					"blue", "gray"
				],

				"GoodFirends": [{
						"id" : 1 ,
						"name": "大姨太",
						"pic": "images/2.jpg",
						"say": "如果这个世界都近视了，我愿站在高处，握住你的手，告诉你我的感受；如果这个世界的耳朵都被堵了，我愿变成风，掠过你的耳底，亲口说：我爱你！",
						"color": "gray"
					},
					{
						"id" : 1 ,
						"name": "二姨太",
						"pic": "images/3.jpg",
						"say": "孤单不是与生俱来，而是由你爱尚上个人的那一刻开始",
						"color": "blue"
					},
					{
						"id" : 1 ,
						"name": "三姨太",
						"pic": "images/4.jpg",
						"say": "爱你的人如果没有按你所希望的方式爱你，那并不代表他们没有全心全意地爱你",
						"color": ""
					}
				]
			},
			"methods" : {
				"mkFriend" : function(id){
					var myId = window.sessionStorage.getItem("id") ;
					if(myId == null) return ;
					
					var u = url + "/friend/InsertById?friendId="+ id +"&userId=" + myId;
					console.log(u) ;
					axios.get(u)
					.then(function(response){
						if(response.data.state == 0){
							var e = document.getElementById("mkBtn"+id) ;
							e.style.display = "none" ;
							e = document.getElementById("mkRes"+id) ;
							e.style.display = "block" ;
						}
					})
					.catch() ;
				}
			}
		}

		config2 = {
			"el": ".search-form",
			"data" : {
				"loginIcon" : "LOGIN" 
			},
			"methods": {
				"login": function() {
					var login = document.getElementById('login');
					login.style.display = "block";
				},
				"register" : function(){
					
				}
			},
			"mounted" : function(){
				var id = window.sessionStorage.getItem("id") ;
				var name = window.sessionStorage.getItem("name") ;
				
				if(name != null) this.loginIcon = name ;
				if(id == null) return ;
				var u = url + "/user/matchFriend?id="+ id ;
				console.log(u) ;
				
				axios.get(u)
				.then(function(response){
					var f = response.data.data ;
					console.log(this.vue.GoodFirends) ;
					console.log(f) ;
					for(var i = 0; i < f.length && i < this.vue.GoodFirends.length; i ++){
						this.vue.GoodFirends[i].name = f[i].name ;
						this.vue.GoodFirends[i].say = f[i].say ;
						this.vue.GoodFirends[i].id = f[i].id ;
					}
				})
				.catch() ;
			}
		}

		var vue = new Vue(config);
		var vue2 = new Vue(config2);
		var vue0 = new Vue(config0);
	</script>
	<script>
		window.onunload = function(){
			
		}
	</script>
</html>
